{% extends 'web_base.html' %}
{% load staticfiles %}
{% block css_js %}
    <link rel="stylesheet" href={% static "css/goods_sort.css" %}>
    <script src={% static "js/goods_sort.js" %}></script>

{% endblock %}
{% block title %}
    电脑分类页
{% endblock %}




{% block web_body %}
    <div class="nav">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="{% url 'goods:index' %}">首页</a></li>
                <li>{% block Crumbs %}{{ goods_type }}{% endblock %}</li>
            </ul>
        </div>
    </div>
    <!-- 小屏模式下的选项 -->
    <div class="small_opt">

        <div class="container">

            <div class="form-group">
                <a href="{% url 'goods:goods_sort' goods_type 1 %}">默认</a>
                <a href="{% url 'goods:goods_sort' goods_type 1 %}?sort=Tprice">价格从高到低</a>
                <a href="{% url 'goods:goods_sort' goods_type 1 %}?sort=Lprice">价格从低到高</a>
                {#                <select class="form-control change">#}
                {#                    <option value="0">请选择排序</option>#}
                {#                    <option value="1">发布日期</option>#}
                {#                    <option value="2">价格从低到高</option>#}
                {#                    <option value="3">价格从高到底</option>#}
                {#                    <option value="4">人气</option>#}
                {##}
                {#                </select>#}
            </div>

        </div>

    </div>
    <!-- /小屏模式下的选项 -->
    <div class="list_body">
        <div class="container">
            <div class="row">
                <div class="goods">

                    {% for com in page_goods %}
                        <div class="col-lg-4 col-md-4">
                            <a href={% url 'goods:goods_detail' com.id %} class="thumbnail">
                                <img src="{{ com.image.url }}" alt="通用的占位符缩略图" class="img-responsive">
                                <p class="tit">{{ com.name }}</p>
                                <p class="price">¥{{ com.price }}</p>
                            </a>
                        </div>

                    {% endfor %}
                </div>

            </div>
             <div  aria-label="Page navigation">
                        <ul class="pagination">
                            {% if page_goods.has_previous %}
                                <li>
                                    <a href="{% url 'goods:goods_sort' goods_type page_goods.previous_page_number %}" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                            {% for page_good in pages %}
                                {% if page_good == page_goods.number %}
                                    <li><a href="{% url 'goods:goods_sort' goods_type page_good %}?sort={{ sort }}" style="color: red;">{{ page_good }}</a></li>
                                {% else %}
                                     <li><a href="{% url 'goods:goods_sort' goods_type page_good %}?sort={{ sort }}">{{ page_good }}</a></li>
                                {% endif %}

                            {% endfor %}


                            {% if page_goods.has_next %}
                                <li>
                                    <a href="{% url 'goods:goods_sort' goods_type page_goods.next_page_number %}?sort={{ sort }}" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </div>

        </div>

    </div>

{% endblock %}
{% block end_js %}
    <script>
        {#    var cg = $('.change');#}
        {#    var  change_num = 0;#}
        {#    cg.change(function(){#}
        {#    change_num =  $('.change option:selected').val();#}
        {#    console.log(change_num);#}
        {#        $.get( {% url 'goods:goods_sort' 'goods_type' 1 %}#}
        {#        );#}
        {##}


    </script>
{% endblock %}






